import React, { Component } from 'react';
import { Tabs,DatePicker,Button } from 'antd';
import tuduiimg from '../static/renshu.svg'
import './TeamState.scss'
class TeamStateDiv extends Component {
    constructor(props) {
        super(props);

    }
    render() {
        const {name,number} = this.props
        return (
            <div className='TeamStateDiv'>
                <img src={tuduiimg}/>
                <div className="name">{name}</div>
                <div className="number">{number}</div>
            </div>
        );
    }
}
class TeamStateDivT extends Component {
    constructor(props) {
        super(props);

    }
    render() {
        const {name,number,name1,number1} = this.props
        return (
            <div className='TeamStateDivT'>
                <p>
                    <div className="name">{name}</div>
                    <div className="number">{number}</div>
                </p>
                <p>
                    <div className="name">{name1}</div>
                    <div className="number">{number1}</div>
                </p>
            </div>
        );
    }
}
class TeamStateDivL extends Component {
    constructor(props) {
        super(props);

    }
    render() {
        const {name,number,} = this.props
        return (
            <div className='TeamStateDivL'>
            
                    <div className="number">{number}</div>
                    <div className="name">{name}</div>
            </div>
        );
    }
}

var testdate = (data,ist)=>{
    if(data){
        if(ist){
            return `${(data*100).toFixed(2)}%`
        }
        return data
    }else{
        return 0
    }
}
class TeamState extends Component {
    constructor(props) {
        super(props);

    }
    render() {
        const {name,data} = this.props
        return (
            <div className='TeamState'>
                <div style={{display:"flex","justifyContent":"center",marginBottom:"50px"}}>
                     <TeamStateDiv name="研发总人数" number={testdate(data.teamPeopleNum)} /> 
                </div>
                <div style={{display:"flex","justifyContent":"center"}}>

                    <div style={{width:"50%"}}>
                        <div style={{display:"flex","justifyContent":"center",marginBottom:"50px"}}>

                            <TeamStateDivT name="出勤人数" number={testdate(data.attendanceNum)}  name1="占比" number1={testdate(data.attendancePercent,true)} />  
                        </div>
                        <div style={{display:"flex","justifyContent":"center"}}>
                            <TeamStateDivL name="公司办公人数" number={testdate(data.companyOfficeNum)} />
                            <TeamStateDivL name="居家办公人数" number={testdate(data.homeOfficeNum)} />
                            <TeamStateDivL name="客户现场人数" number={testdate(data.clientOfficeNum)} />
                        </div>

                    </div>
                    <div style={{width:"50%"}}>
                        <div style={{display:"flex","justifyContent":"center",marginBottom:"50px"}}>

                            <TeamStateDivT name="缺勤人数" number={testdate(data.absenteeismNum)}  name1="占比" number1={testdate(data.absenteeismPercent,true)} />  
                        </div>

                        <div style={{display:"flex","justifyContent":"center"}}>
                            <TeamStateDivL name="休假人数" number={testdate(data.vacationNum)} />
                            <TeamStateDivL name="旷工人数" number={testdate(data.minerNum)} />
                        </div>
                    </div>
                </div>

            </div>
        );
    }
}

class Tagone extends Component {
    constructor(props) {
        super(props);

    }
    render() {
        const {name,number,imgs} = this.props
        return (
            <div className='Tagone'>
                    
                    <div>
                        <div className="name">{name}</div>
                        <div className="number">{number}</div>
                        <div className="flex-center-center">
                         <img src={imgs}/>
                        </div>
                    </div>
            </div>
        );
    }
}
class Tagtwo extends Component {
    constructor(props) {
        super(props);

    }
    render() {
        const {title,data} = this.props
        return (
            <div className='Tagtwo '>
                    <div  className="title">
                        {title}
                    </div>
                  
                   
                        {
                            data && data[0]?<div className="flex-center-start">{data[0].name} <span className="number">{data[0].number}</span> </div>:null
                        }
                        
                    

                    {/* <div  className="flex-center-start"> */}
                        
                        {
                            data && data[1]? <div className="flex-tag">{data[1].name}<span style={{marginLeft:"5px",color: "#1890FF"}}>{data[1].number}</span></div>:null
                        }
                       
                        {
                            data && data[2]? <div className="flex-tag">{data[2].name}<span style={{marginLeft:"5px",color: "#1890FF"}}>{data[2].number}</span></div>:null
                        }
                        
                    {/* </div> */}
            </div>
        );
    }
}

export default TeamState;
export {Tagone,Tagtwo}
